<template>

  <el-popover :visible="visible" id="process-tips" placement="right"
              :popper-style="popperStyle"
              :width="500" trigger="click">
    <!--    <template #reference>-->
    <!--      <el-button style="margin-right: 16px">Click to activate</el-button>-->
    <!--    </template>-->

    <el-tabs ref="tab" @mouseenter="this.clearInterVal" @mouseleave="this.hide" v-model="value" class="demo-tabs"
             @tab-click="handleClick">

      <el-tab-pane
          :label="index"
          :name="index"
          v-for="(item,index) in gridData" style="min-height: 500px" :key="index">
        <div v-if="index=='logList'">
          <div v-for="(it,index) in item">
            {{ it }}
          </div>
        </div>
        <div v-else-if="index=='inputList'">
          <el-table class="tableClass" :data="this.inputList" style="width: 100%;" height="146px"
                    :fit="true" :stripe="true" :border="true" size:="large" :highlight-current-row="true">
            <el-table-column type="index" width="50"/>
            <el-table-column v-for="(it, id) in this.inputColumns" :prop="it" :label="it" :key="id"
                             :render-header="this.renderHeader" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <div v-else-if="index=='outputList'">
          <el-table class="tableClass" :data="this.outputList" style="width: 100%;" height="146px"
                    :fit="true" :stripe="true" :border="true" size:="large" :highlight-current-row="true">
            <el-table-column type="index" width="50"/>
            <el-table-column v-for="(it, id) in this.outputColumns" :prop="it" :label="it" :key="id"
                             :render-header="this.renderHeader" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <div v-else-if="index=='icon'">
          <img style="width: 100%;height: 100%;!important;" :src="'data:image/svg+xml;base64,'+item"/>
        </div>
        <div v-else="index!='logList'">
          {{ item }}
        </div>
      </el-tab-pane>
    </el-tabs>

  </el-popover>

</template>

<script>

import {h} from "vue";
import {Image} from "view-ui-plus";

export default {
  name: 'SquareLakeFlowNodeHover',
  props: [],
  data() {
    return {
      visible: false,
      gridData: [],
      value: null,
      // tableHeader: {},
      inputList: [],
      outputList: [],
      currentX: null,
      outputColumns: [],
      inputColumns: [],
      currentY: null,
      popperStyle: ""
    }
  },
  created() {
    // this.initList();
  },
  mounted() {
  },
  methods: {
    renderHeader({column, $index}) {
      // 新建一个 span
      let span = document.createElement('span');
      // 设置表头名称
      span.innerText = column.label;
      // 临时插入 document
      document.body.appendChild(span);
      // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
      column.minWidth = span.getBoundingClientRect().width + 30;
      // 移除 document 中临时的 span
      document.body.removeChild(span);
      return h('span', column.label);
    },
    handleClick() {

    },
    clearInterVal() {
      clearTimeout(window.s);
    },
    show(d, x, y) {
      this.visible = true;
      if (x && y) {
        this.popperStyle = "top:" + y + "px;left:" + (x) + "px;";
      }


      if (d && d.properties) {
        // this.tableHeader = {};
        // this.gridData =
        // const cb = JSON.stringify(d);
        // d = JSON.parse(cb);
        const s = {};
        this.inputList = [];
        this.outputList = [];

        if (d.properties.logList) {
          s.logList = d.properties.logList;
        }
        if (d.properties.inputList) {
          s.inputList = d.properties.inputList;
          this.inputList = s.inputList;
          this.inputColumns = this.getHeaders(this.inputList);
        }
        if (d.properties.outputList) {
          s.outputList = d.properties.outputList;
          this.outputList = s.outputList;
          this.outputColumns = this.getHeaders(this.outputList);
        }
        var keys = Object.keys(d.properties);
        for (const key of keys) {
          if (key == 'logList') {
            continue;
          }
          if (key == 'inputList') {
            continue;
          }
          if (key == 'outputList') {
            continue;
          }
          s[key] = d.properties[key];
        }
        this.gridData = s;
        var keys = Object.keys(s);
        if (keys) {
          this.value = keys[0]
        }
      }


    },
    getHeaders(inputList) {
      if (!inputList) {
        return [];
      }
      let he = [];
      try {
        for (const i of inputList) {
          if (typeof i == 'string') {
            he.push("0");
          }else{
            const keys = Object.keys(i);
            for (const key of keys) {
              let b = false;
              for (const s of he) {
                if (s == key) {
                  b = true;
                  break;
                }
              }
              if (!b) {
                he.push(key);
              }

            }
          }

        }
      } catch (e) {

      }
      return he;
    },
    hide() {
      this.visible = false;
      this.gridData = [];
    },
    hideInterval() {
      window.s = setTimeout(function () {
        this.gridData = [];
        this.visible = false;
      }.bind(this), 150)
    }
  }
}
</script>
<style scoped>

</style>
